import React, { Component } from 'react'
import axios from 'axios'

export default class alert extends Component {
    state = {
        userList: [],
        name: '',
        age: "",
        sj: "",
        mi: "",
        pass: "",
        name: '',
    }
    componentDidMount() {
        axios.get('/user.json').then(({ data }) => {
            this.setState({ userList: data })
        })
    }
    render() {
        let { name } = this.state
        // console.log(this.props.children);
        return (
            <div className='alert'>
                <h2>{this.props.children.type === 1 ? "添加" : this.props.children.type === 2 ? "修改" : "删除"}</h2>
                <ul>
                    <li>姓名<input type="text" onChange={(e) => { this.setState({ name: e.target.value }) }} /></li>
                    <li>性别<input type="text" onChange={(e) => { this.setState({ age: e.target.value }) }} /></li>
                    <li>电话<input type="text" onChange={(e) => { this.setState({ sj: e.target.value }) }} /></li>
                    <li>密码<input type="text" onChange={(e) => { this.setState({ mi: e.target.value }) }} /></li>
                </ul>
                <div>
                    <button onClick={() => { this.yes() }}>确认</button>
                    <button onClick={this.props.children.closeAlert}>取消</button>
                </div>

            </div>
        )
    }
    yes = () => {
        let aa = {
            "id": this.state.userList.length + 1,
            "name": this.state.name,
            "age": this.state.age,
            "sj": this.state.sj,
            "mi": this.state.mi
        }
        if (this.props.children.type === 1) {
            // 添加
            this.state.userList.push(aa)

        } else if (this.props.children.type === 2) {
            // 修改
            // let s = this.state.userList.filter(item => {
            //     if (item.id === this.props.children.id) {
            //         return item = aa
            //     }
            // })
            // console.log(s);
            // let data =[...]
            // this.state.userList
        } else if (this.props.children.type === 3) {
            // 删除
            this.state.userList.splice(this.props.children.item.id, 1)
        }
        this.props.children.closeAlert()
        this.props.children.setData(this.state.userList)
    }

}
